import React, { useEffect, useState } from "react";
import { SliderContainer } from "./style";
import "swiper/swiper-bundle.min.css";
import Swiper, {Pagination, Autoplay} from "swiper";

Swiper.use([Pagination, Autoplay])

function Slider(props) {
    const [sliderSwiper, setSliderSwiper] = useState(null)
    const {bannerList} = props

    useEffect(() => {
        if(bannerList.length && !sliderSwiper) {
            let newSliderSwiper = new Swiper(".slider-container", {
                loop: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
                pagination: {el: '.swiper-pagination'},
            })
            setSliderSwiper(newSliderSwiper)
        }
    }, [bannerList.length, sliderSwiper])

    return(
        <SliderContainer>
            <div className="slider-container">
                <div className="swiper-wrapper">
                    {
                        bannerList.map((item, index) => {
                            return (
                                <div className="slider-nav" key={index}>
                                    <img src={item.imageUrl} width="100%" height="100%" alt="推荐"/>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="swiper-pagination"></div>
            </div>
        </SliderContainer>
    )
}

export default React.memo(Slider)